<template>
  <div>
    <table-form :disabled="disabled" @next="sales4Ctrl" @jump="jump">
      <template slot="title">
        <h2 class="fromDivTit">
          <div>请确认是否完成拍照</div>
          <i
            v-if="isEdit && detailRes.step <= 9"
            class="edit-icon"
            @click="isEnabled = true"
          />
        </h2>
      </template>
      <div class="form-body">
        <el-form
          ref="sales4Form"
          :model="sales4Form"
          label-width="70px"
          class="formDiv"
        >
          <!-- <div class="tab_div"> -->
          <el-row :gutter="20">
            <el-form-item
              :required="true"
              label="请完成勾选:"
              label-width="87px"
            >
              <el-col :xs="24" :sm="24" :lg="24" class="agg">
                <el-checkbox
                  v-model="checked"
                  :disabled="isEdit && !isEnabled"
                  @change="change"
                  >已完成拍摄</el-checkbox
                >
              </el-col>
            </el-form-item>
          </el-row>
          <el-row :gutter="20">
            <el-form-item label="备注:" label-width="85px">
              <el-col :xs="24" :sm="24" :lg="24" class="agg">
                <el-input
                  v-model="sales4Form.remarkStep4"
                  :disabled="isEdit && !isEnabled"
                  :rows="5"
                  type="textarea"
                  placeholder="请输入"
                  class="input_b"
                  style="width: 493px"
                />
              </el-col>
            </el-form-item>
            <el-form-item v-if="detailRes.photoDate" label="" class="leasecss">
              拍摄日期:
              {{ dateFormat(detailRes.photoDate) }}
            </el-form-item>
          </el-row>
          <!-- </div> -->
        </el-form>
        <div v-if="jumpReason" class="jump-box">
          <div class="jump-reson">跳过原因:</div>
          <span>{{ jumpReason }}</span>
        </div>
      </div>
      <template v-if="isEdit" slot="footer">
        <div class="dialog-footer">
          <el-button
            v-if="isEnabled"
            :disabled="disabled"
            type="primary"
            @click="saveEdit"
            >保存</el-button
          >
        </div>
      </template>
    </table-form>
  </div>
</template>
<script>
import TableForm from "../../../lease/components/tableForm";
import { saleStep4, saleDetail, edit } from "@/api/sale";
import { dateFormat } from "@/utils/common";

export default {
  components: {
    TableForm,
  },
  props: {
    id: {
      type: String,
      default: "",
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dateFormat,
      sales4Form: {
        completePhoto: "",
        remarkStep4: "",
        id: "",
      },
      checked: false,
      disabled: true,
      isEnabled: false,
      detailRes: {
        jumpList: [],
      },
    };
  },
  computed: {
    jumpReason() {
      if (!this.detailRes.jumpList) return "";
      const hasReason = this.detailRes.jumpList.find((item) => {
        return item.jumpStep === 4;
      });
      return hasReason ? hasReason.jumpNote : "";
    },
  },
  watch: {
    checked: {
      handler(newVal, oldVal) {
        if (newVal === false) {
          this.disabled = true;
        } else {
          this.disabled = false;
        }
      },
      deep: true,
    },
  },
  created() {
    this.getsaleDetail();
  },
  methods: {
    async saveEdit() {
      var res = await edit(this.sales4Form);
      if (res.code === 200) {
        this.$message({ message: "操作成功", type: "success" });
        this.isEnabled = true;
      }
    },
    async getsaleDetail() {
      var res = await saleDetail(this.id);
      this.detailRes = res.data;
      if (!this.isEdit) {
        this.sales4Form = {
          completePhoto: "",
          remarkStep4: "",
          id: this.id,
          stepName: "待拍摄",
        };
      } else {
        this.detailRes = res.data;
        this.sales4Form = {
          completePhoto: res.data.completePhoto,
          remarkStep4: res.data.remarkStep4,
          id: this.id,
          stepName: "待拍摄",
        };
        if (res.data.completePhoto === 1) {
          this.checked = true;
        } else {
          this.checked = false;
        }
      }
    },
    async sales4Ctrl() {
      this.sales4Form.id = this.id;
      var sale4Res = await saleStep4(this.sales4Form);
      if (sale4Res.code === 200) {
        this.$emit("next");
      }
    },
    change() {
      if (this.checked === true) {
        this.sales4Form.completePhoto = 1;
      } else {
        this.sales4Form.completePhoto = 0;
      }
    },
    jump() {
      this.$emit("jump", this.sales4Form);
    },
  },
};
</script>
<style lang="scss" scoped>
.leasecss {
  font-size: 12px;
  color: #d0d0d0;
  margin-left: 20px;
  margin-top: 80px;
}
.form-body {
  display: flex;
  .jump-box {
    margin-left: 50px;
    word-break: break-all;
    .jump-reson {
      color: #5ac6b7;
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
}
</style>
